<template>
    <div class="background">
        <div class="common-layout">
            <el-container>
                <el-header class="header_background">
                    <div style="position: absolute; top: 0.1%; left: 2%;">
                        <img alt="" src="@/assets/logo1.png" style="width: 40px;">
                    </div>
                    <div style="position: absolute; top: 1.5%; left: 38%;">
                        <span style="font-size: 15px; font-weight: bold; color: whitesmoke">
                          您好，用户&nbsp;&nbsp;{{ username }}&nbsp;&nbsp;！欢迎进入房屋租赁平台！
                        </span>
                    </div>
                    <div class="right-info">
                      <el-button @click="SignOut" style="margin-right: 10px;">
                        <el-icon :size="18" style="margin-right: 5px;">
                          <avatar />
                        </el-icon>
                        退出登录
                      </el-button>
                    </div>
                </el-header>
                <el-header class="sub_header_background">
                  <el-menu
                    :default-active="activeIndex"
                    router
                    class="el-menu-demo"
                    mode="horizontal"
                    background-color="#545c64"
                    text-color="whitesmoke"
                    active-text-color="white"
                    style="height: 102%;"
                    unique-opened
                  >
                    <el-menu-item index="/TenantHome">首页</el-menu-item>
                    <el-menu-item index="/TenantFavorite">我的收藏</el-menu-item>
                    <el-sub-menu index="transaction">
                      <template #title>交易管理</template>
                      <el-menu-item index="/tenantApplication">我的申请</el-menu-item>
                      <el-menu-item index="/TenantRecord">交易记录</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/SelectHouse">查看房源</el-menu-item>
                    <el-menu-item index="/VectorDatabase">向量数据库</el-menu-item>
                    <el-menu-item index="/PersonalAssistant">RAG问答助手</el-menu-item>
                    <el-menu-item index="/GraphRAGAssistant">GraphRAG问答助手</el-menu-item>
                    <el-menu-item index="/TenantSelfInfo">个人信息</el-menu-item>
                  </el-menu>
                </el-header>
                <el-main>
                    <div style="display: flex; font-weight: bold; font-family: Microsoft YaHei; font-size: 20px; margin-top: 0%;">
                      我的申请列表
                      <div class="line" style="margin-left: 1.5%; margin-top: 1%;"></div>
                    </div>
                    <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 1%;"> 
                      <div style="display: flex; align-items: center; gap: 50px;">
                        <el-switch v-model="approved" inactive-text="已通过"></el-switch>
                        <el-switch v-model="pending" inactive-text="待审核"></el-switch>
                        <el-switch v-model="rejected" inactive-text="已拒绝"></el-switch>
                      </div>
                    </div>
                    <div style="display: flex; flex-wrap: wrap; gap: 20px;">
                      <el-card shadow="hover" style="margin-top: 2%; width: calc(100% - 10px); padding: 15px; background-color: #f9f9f9; border: 1px solid #ebebeb; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; ">
                        <el-table :data="filteredData" style="width: 100%" border>
                          <el-table-column label="房源列表" header-align="center">
                            <template #default="{ row }">
                              <div class="common-layout">
                                <el-container>
                                  <el-aside width="200px">
                                    <el-image :src="houseMap.get(row.houseId)?.image_url" fit="fill" style="width: 100%; height: 100%"></el-image>
                                  </el-aside>
                                  <el-tag
                                  style="position: absolute; top: 10px; right: 10px;">
                                    {{ getTypeLabel(row.type) }} 

                                  </el-tag>
                                  <el-container>
                                    <span style="font-size: 15px; color: black; white-space: nowrap; margin-left: 16npmpx;">申请时间：{{ row.formattedTime }}</span>  
                                    <el-tag
                                      :type="getStatusTagType(row.status)"
                                      effect="dark"
                                      style="position: absolute; bottom: 10px; right: 10px;"
                                    >
                                      {{ getStatusLabel(row.status) }}
                                    </el-tag>
                                    
                                    <el-header>
                                      <router-link :to="{ name: 'TenantApplicationHouseDisplay', query: { houseId: row.houseId } }" style="font-family: Microsoft YaHei;">
                                        {{ houseMap.get(row.houseId)?.title }}：{{ houseMap.get(row.houseId)?.address }}
                                      </router-link>
                                    </el-header>
                                    <el-main style="margin-top: -5%;">
                                      &nbsp;&nbsp;&nbsp;&nbsp;{{ houseMap.get(row.houseId)?.description }}
                                      <el-tag
                                        :type="getStatusTagType(row.status)"
                                        effect="dark"
                                        style="position: absolute; bottom: 10px; right: 10px;"
                                      >
                                        {{ getStatusLabel(row.status) }}
                                      </el-tag>
                                    </el-main>
                                  </el-container>
                                </el-container>
                              </div>
                            </template>
                          </el-table-column>
                          
                          <el-table-column label="操作" width="150" header-align="center">
                            <template #default="scope">
                              <div style="display: flex; flex-direction: column; align-items: baseline; gap: 8px;">
                                <!-- 待审核状态：加快审批 -->
                                <template v-if="scope.row.status === 'pending'">
                                  <el-button 
                                    icon="Timer" 
                                    type="warning" 
                                    @click="handleSpeedUp(scope.row)"
                                    size="small"
                                  >
                                    加快审批
                                  </el-button>
                                </template>
                                
                                <!-- 已拒绝状态：删除申请 -->
                                <template v-if="scope.row.status === 'rejected'">
                                  <el-popconfirm 
                                    title="确认删除该申请？删除后不可恢复" 
                                    @confirm="handleDelete(scope.row)"
                                  >
                                    <template #reference>
                                      <el-button 
                                        icon="Delete" 
                                        type="danger"
                                        size="small"
                                      >
                                        删除申请
                                      </el-button>
                                    </template>
                                  </el-popconfirm>
                                </template>
                                
                                <!-- 已通过状态：退房申请 -->
                                <template v-if="scope.row.status === 'approved'">
                                  <el-popconfirm 
                                    title="确认提交退房申请？" 
                                    @confirm="handleCheckOut(scope.row)"
                                  >
                                    <template #reference>
                                      <el-button 
                                        icon="HomeFilled" 
                                        type="info"
                                        size="small"
                                      >
                                        退房申请
                                      </el-button>
                                    </template>
                                  </el-popconfirm>
                                </template>
                              </div>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-card>
                    </div>
                </el-main>
            </el-container>
        </div>
    </div>
</template>
<script src="@/assets/js/TenantApplication.js"></script>

<style scoped>
/* 样式保持不变 */
.background {
  background-color: whitesmoke;
  height: 100vh;
}
.header_background {
  background-color: #1b4989;
  height: 6vh;
}
.sub_header_background {
  background-color: #545c64;
  height: 7vh;
}
.right-info {
  width: 100px;
  position: absolute;
  right: 2%;
  top: 0.7%
}

.right-info:hover {
  cursor: pointer;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.line{ 
  background: url(https://www.upc.edu.cn/ximages/tit1.png) center repeat-x; 
  height: 0.4rem; 
  flex: 1; 
  background-size: auto;
  margin: 0.16rem;
}
</style>